<template>
  <div class="je-plugin-worktask">
    <Header class="mui-bar mui-bar-nav header-blue" title="流程待办">
      <!-- <span slot="left-extra" /> -->
      <i
        slot="right-extra"
        :style="{display: selectTypes.code ==='PI_APPROVED' || selectTypes.code ==='PI_OWNER'?'block':'none'}"
        @tap="clickSelect"
        class="jeicon jeicon-funnel workflow-icon"
      />
    </Header>
    <div class="mui-content">
      <div
        id="slider"
        @slide="slide"
        class="mui-slider mui-fullscreen"
        data-total="4"
      >
        <div
          id="sliderSegmentedControl"
          class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted"
        >
          <!-- 业务数据标签 -->
          <a
            v-for="type in types"
            :key="type"
            :class="{'mui-active':type.active}"
            :href="'#'+type.code"
            @tap="clickTab(type.code)"
            class="mui-control-item"
          >
            {{ type.text }}({{ type.num }})
          </a>
        </div>
        <div class="mui-slider-progress-bar mui-col-xs-4" />
        <div class="mui-slider-group">
          <!-- 业务数据模块 -->
          <div
            v-for="type in types"
            :key="type"
            :class="{'mui-active':type.active}"
            :id="type.code"
            class="mui-slider-item mui-control-content"
          >
            <list
              :ref="type.code"
              :type="type.code"
              @refreshBadge="refreshBadge"
              @refreshDelay="refreshDelay"
            />
          </div>
        </div>
      </div>
    </div>
    <!-- <Icon
      @tap="addBubble"
      type="jeicon-lc"
      class="addIcon"
      style="color: #536DFE;"
      size="lg"
    />-->
    <div
      @tap="addBubble"
      class="je-audio-btn je-fixed-button"
    >
      <i class="jeicon jeicon-sitemap-three-o" />
    </div>
  </div>
</template>

<script>
import list from './components/list';
import Header from '@/components/header';

export default {
  components: {
    Header,
    list,
  },
  props: {
    currentPage: Object,
  },
  data() {
    return {
      types: [
        {
          text: '审批',
          code: 'PI_PREAPPROV',
          num: 0,
          active: true,
        },
        { text: '经办', code: 'PI_APPROVED', num: 0 },
        { text: '我的', code: 'PI_OWNER', num: 0 },
        // { text: '延迟', code: 'PI_DELAY', num: 0 },
      ],
      selectTypes: { code: 'PI_PREAPPROV', num: 0, active: true },
      clickType: true,
    };
  },
  created() {
    const me = this;
    JE.registBadge((badges, refreshLists) => {
      if (refreshLists.length == 0) return false;
      refreshLists.forEach((item) => {
        if (item.code === 'JE-PLUGIN-WORKTASK' && item.type === 'TASK') {
        // 执行页面刷新
          me.refreshView('PI_PREAPPROV');
        }
      });
    });

    const app = (window.plus ? plus.webview.currentWebview().app : this.currentPage) || {};
    window._app_code = app.code;
    // 刷新流程信息
    window.addEventListener('do_workflow_after', (event) => {
      const { type } = event.detail;
      // 因为下方mounted做的进入页面的forEach循环，导致当前的selectTypes中的code变成了延迟的code，所以要进行单独处理
      const activeCode = me.types.filter(code => code.active); // 找到当前激活的菜单
      me.refreshView(type || activeCode[0].code || me.selectTypes.code);
    });
    // 系统推送
    window.addEventListener('apppush', (event) => {
      const params = event.detail;
      // 根据推送的参数，处理业务...
      const data = params.taskNode;
      if (data) {
        data.workflow_type = 'PI_PREAPPROV'; // 审批
        JE.fire('je-workflow-info', 'init', {
          data,
          opener: plus.webview.currentWebview().id,
          show: true,
        });
      }
    });
  },
  mounted() {
    const _this=this;
    mui.init();
    mui('.mui-slider').slider();
    // 初始数据
     this.initActiveView(0);
    // this.types.forEach((item, ine) => {
    //   this.initActiveView(ine);
    // });
    window.addEventListener("popstate", function(){
      if(_this && _this.refreshView){
        _this.refreshView("PI_PREAPPROV");
      }
    }, false);
  },
  methods: {
    clickTab(type) {
      if (this.clickType) {
        this.clickType = false;
        this.refreshView(type);
        setTimeout(() => {
          this.clickType = true;
        }, 2000);
      }
    },
    /**
     * 滑动事件
     * @param {Event} event 事件
     */
    slide(event) {
      const index = event.detail.slideNumber;
      this.initActiveView(index);
    },
    /**
     * 初始化模块数据
     * @param {int} index 模块索引
     */
    initActiveView(index) {
      const type = this.types[index];
      this.selectTypes = type;
      this.$refs[type.code][0].initData();
    },
    /**
     * 刷新模块数据
     * @param {String} type 模块类型
     */
    refreshView(type) {
      if(this.$refs[type][0]){
        this.$refs[type][0].refresh();
      }
    },
    /**
     * 刷新角标
     * @param {Object} data 角标数据
     */
    refreshBadge(data) {
      this.types.forEach((type, index) => {
        type.num = data[`${type.code.replace('PI_', '').toLowerCase()}Count`];
        this.$set(this.types, index, type);
      });
    },
    /**
     * 延迟操作
     */
    refreshDelay() {
      this.refreshView('PI_DELAY');
      this.refreshView('PI_PREAPPROV');
    },
    /**
     * 弹出流程发起
     */
    addBubble() {
      this.$router.push({
        path: '/JE-PLUGIN-WORKTASK/doTaskflow',
        title: '流程发起',
        hideNView: false,
      });
    },
    clickSelect() {
      const that = this;
      let params = {};
      JE.actionSheet('', (e) => {
        const { index } = e;// 按钮的索引
        switch (index) {
          case 1:
            // eslint-disable-next-line no-lone-blocks
            {
              params = { isNandY: 0 };
              that.$refs[that.selectTypes.code][0].refresh(params);
            }
            break;
          // eslint-disable-next-line no-lone-blocks
          case 2: {
            params = { isNandY: 1 };
            that.$refs[that.selectTypes.code][0].refresh(params);
          }
            break;
        }
      }, [{ title: '未完结流程' }, { title: '已完结流程' }]);
      
    },
  },
};
</script>
<style lang="less">
  .mui-segmented-control.mui-segmented-control-inverted
  .mui-control-item.mui-active {
    background: transparent;
    border: none;
  }

  .mui-slider
  .mui-segmented-control.mui-segmented-control-inverted
  ~ .mui-slider-group
  .mui-slider-item {
    border-bottom: 0;
  }

  .mui-fullscreen .mui-segmented-control ~ .mui-slider-group {
    top: 94px;
  }

  .mui-slider-indicator.mui-segmented-control {
    min-height: 94px;
  }

  .mui-segmented-control .mui-control-item {
    line-height: 96px;
  }

  .mui-slider-progress-bar {
    height: 1.5px;
  }
</style>
<style lang="less" scoped>
  @import "~@/theme/index.less";
  .header-top {
    margin-top: 44 * @hd;;
  }

  .je-plugin-worktask {
    .workflow-icon {
      padding: 0 15 * @hd !important;
    }
  .mui-slider {
    background-color: #ffffff;
  }
  .addIcon {
    font-size: 47 * @hd;
    position: fixed;
    bottom: 80 * @hd;
    right: 40 * @hd;
    z-index: 1000;
  }
  .jeicon-lc:before {
    background-color: #fff;
    border-radius: 50%;
  }
  .je-fixed-button {
    bottom: 30 * @hd + 60 * @hd;;
    .jeicon {
      color: #ffffff;
      font-size: 22 * @hd;
    }
  }
}
</style>
